<template>
	<view class="page">
		<form>
			<view v-for="item, index in cloumList" :key="index">
				<template v-if="item.type == 'input'">
					<view class="title">
						<span class="commonName" v-if="!canSee">{{ index + 1 }}.</span>
						<span class="commonName">{{ item.name }}</span>
						<span class="commonValue" v-if="canSee"> : {{ form[item.value] }}</span>
					</view>
					<view class="inputBox" style="margin-bottom: 10rpx;" v-if="!canSee">
						<input v-model="form[item.value]" class="infoBoxItemLeft" :placeholder="'请输入' + item.name" />
					</view>
				</template>
				<template v-if="item.type == 'image'">
					<view class="title">
						<span class="commonName" v-if="!canSee">{{ index + 1 }}.</span>
						<span class="commonName">{{ item.name }}</span>
					</view>
					<photoUploadMuch v-model="form[item.value]" :index="index" @updateUpload="updateUpload"
						:canSee="canSee" />
				</template>
			</view>
			<divAdd :list="form.zdyList" :canSee="canSee" @update="updateDivList" />
			<view class="updateTimeClass" v-if="showTime">更新时间: {{ form.updateTime ? form.updateTime : form.createTime }}
			</view>
			<view class="updateTimeClass" v-if="showTime">创建人: {{form.nickName}}
			</view>
			<bottomButton v-if="!canSee" :isFixed="false" @onPress="save" value="保存" />
		</form>

	</view>
</template>

<script>
import photoUploadMuch from "@/components/photoUploadMuch.vue"
import bottomButton from "@/components/bottomButton.vue"
import divAdd from "@/components/divAdd.vue"
import {
	addDoc,
	editDoc,
	finishMission
} from "../../api/byfz"
import PlaneInfo from "../../utils/planeInfoStorage"
export default {
	components: {
		photoUploadMuch,
		bottomButton,
		divAdd
	},
	data() {
		return {
			cloumList: [{
				name: '客户名称',
				value: 'key1',
				type: 'input'
			},
			{
				name: '样品名称',
				value: 'key2',
				type: 'input'
			},
			{
				name: '客户原样',
				value: 'key3',
				type: 'image'
			}
			],
			initDiyList: [
				{
					name: '打样文件名',
					type: 'text',
					value: ''
				},
				{
					name: '新样图片',
					type: 'img',
					value: ''
				},
				{
					name: '打样参数',
					type: 'img',
					value: ''
				},
				{
					name: '打样针型',
					type: 'text',
					value: ''
				},
				{
					name: '纱线信息',
					type: 'text',
					value: ''
				},
				{
					name: '打样时间',
					type: 'text',
					value: ''
				},
				{
					name: '样品数量',
					type: 'text',
					value: ''
				},
				{
					name: '样品克重',
					type: 'text',
					value: ''
				},
				{
					name: '机织价格',
					type: 'text',
					value: ''
				}
			],
			notes: '',
			data: {},
			form: {
				tableName: 'yangpin',
				zdyList: []
			},
			type: 'add'
		}
	},
	computed: {
		canSee() {
			return this.type == 'see'
		},
		showTime() {
			return this.type == 'edit' || this.type == 'see'
		}
	},
	onLoad() {
		let formData = uni.getStorageSync('formData')
		if (formData && formData.type) {
			this.type = formData.type
			if (this.type == 'see' || this.type == 'edit') {
				this.form = formData.form
				this.form.zdyList = formData.form.key1Ext ? JSON.parse(formData.form.key1Ext) : []
			} else {
				this.form.zdyList = this.initDiyList
			}
		}

		console.log("formData==", formData);
		if (this.type == 'see') {
			uni.setNavigationBarTitle({
				title: '查看样品记录'
			})
		} else if (this.type == 'edit') {
			uni.setNavigationBarTitle({
				title: '修改样品记录'
			})
		}
		// this.data = uni.getStorageSync('searchDetail')
	},
	methods: {
		updateDivList(list) {
			this.form.zdyList = list;
		},
		updateUpload(url, index) {
			this.form[this.cloumList[index].value] = url;
		},
		async save() {
			this.form.key1Ext = JSON.stringify(this.form.zdyList)
			if (this.type == 'add') {
				await addDoc(this.form)
			}
			if (this.type == 'edit') {
				await editDoc(this.form)
			}
			uni.showToast({
				title: '操作成功!',
				icon: 'success'
			})
			// PlaneInfo.clearPlaneInfo()
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index',
					success: function (e) {
						uni.$emit('refreshIndex') // 执行这个事件代码
					},
				});
			}, 200)
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	font-size: 27rpx;
	font-family: Adobe Heiti Std;
	color: #393939;
	line-height: 32rpx;
	overflow-y: auto;
	overflow-x: hidden;
}

.title {
	padding-left: 40rpx;
	padding-right: 40rpx;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	display: flex;
	align-items: center;
}

.icon {
	width: 13rpx;
	height: 13rpx;
	font-size: 32rpx;
	font-family: Adobe Heiti Std;
	margin-left: 8rpx;
}

.editBwBox {
	width: calc(100% - 164rpx);
	background: #FFFFFF;
	border-radius: 13rpx 13rpx 13rpx 13rpx;
	opacity: 1;
	border: 1rpx solid #EEEEEE;
	margin-left: 40rpx;
	margin-right: 40rpx;
	padding-left: 42rpx;
	padding-right: 42rpx;
	padding-top: 36rpx;
	padding-bottom: 36rpx;
	margin-bottom: 30rpx;

	.editBwBoxTop {
		display: flex;
		justify-content: space-between;

		.editBwBoxIcon {
			width: 26rpx;
			height: 28rpx;
			opacity: 1;
		}
	}

	.editBwBoxArea {
		margin-top: 20rpx;
		height: 237rpx;
	}
}

.inputBox {
	width: calc(100% - 164rpx);
	background: #FFFFFF;
	border-radius: 13rpx 13rpx 13rpx 13rpx;
	opacity: 1;
	border: 1rpx solid #EEEEEE;
	margin-left: 40rpx;
	margin-right: 40rpx;
	padding-left: 20rpx;
	padding-right: 42rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	margin-bottom: 30rpx;
	font-size: 10rpx;

	.infoBoxItemLeft {
		font-size: 23rpx;
	}
}
</style>